import React, { Component } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'
import './App.css'
import List from './components/List'

// 【运行需要打开public中的bootstrap样式】
export default class App extends Component {
    

    search = () => {
        // 获取用户的输入
        const { value } = this.keyWordElement

        // this.setState({ isFirst: false, isLoading: true })
        PubSub.publish('dataObj',{ isFirst: false, isLoading: true })

        // 发送请求
        axios.get(`https://api.github.com/search2/users?q=${value}`).then(res => {
            console.log('res', res.data.items);
            // this.setState({isLoading:false, userList: res.data.items })
            PubSub.publish('dataObj',{isLoading:false, userList: res.data.items })
        }).catch(err => {
            console.log('catch', err.message);
            // this.setState({isLoading:false, err:err.message })
            PubSub.publish('dataObj',{isLoading:false, err:err.message })
        })
    }

    render() {
        // const { userList,isFirst,isLoading,err } = this.state
        return (
            <div className="container">
                <section className="jumbotron">
                    <h3 className="jumbotron-heading">Search Github Users</h3>
                    <div>
                        <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search" />
                        <button onClick={this.search}>Search</button>
                    </div>
                </section>
                <List></List>
            </div>
        )
    }
}
